<template>
    <div>
         <el-button type="success" @click="isShowDialog('insert')" icon="el-icon-plus">新增</el-button>
         <el-input placeholder="请输入供应商名称/物料名称" v-model="keywords" class="input-with-select">
            <el-button slot="append" type="primary" icon="el-icon-search" class="searchBtn" @click="searchBtn"></el-button>
        </el-input>
        <!-- 表格 -->
        <el-table :data="tableData" :highlight-current-row="true" stripe border class="table-index"  style="width: 100%;" :height="tableHeight"
        :header-cell-style="getRowClass" v-loading="loading" @sort-change="sortChange">
            <el-table-column fixed type="index" label="*" sortable min-width="40"></el-table-column>
            <el-table-column prop="supplierName" label="供应商名称" sortable='custom' min-width="140"></el-table-column>
            <el-table-column prop="bomName" label="bom名称" sortable='custom' show-overflow-tooltip min-width="140"></el-table-column>
            <el-table-column prop="bomNums" label="bom数量" sortable='custom' show-overflow-tooltip min-width="140"></el-table-column>
            <el-table-column prop="miniPurchase" label="最小采购数" sortable='custom' min-width="85"></el-table-column>
            <el-table-column prop="price" label="单价" sortable='custom' min-width="120"></el-table-column>
            <el-table-column prop="makeInvoiceType" label="发票类型" sortable='custom' show-overflow-tooltip min-width="160"></el-table-column>
            <el-table-column prop="paymentMethod" label="付款方式" sortable='custom' min-width="90"></el-table-column>
            <!-- <el-table-column prop="materialLeadTime" label="物料提前期" sortable='custom' min-width="90"></el-table-column> -->
            <el-table-column fixed="right" label="操作" align="center" width="100">
                <template slot-scope="scope">
                    <el-button @click="isShowDialog('update',scope.row)" type="text" size="mini">编辑</el-button>
                    <el-button @click="deleteData(scope.row)" type="text" size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
        <el-dialog :title="dialog.title" width="750px" center :visible.sync="dialog.isShow" :close-on-click-modal="false" v-dialogDrag>
            <div :style="tableDialogHeightTabPane">
            <el-form :inline="true" class="demo-form-inline" v-model="dialogForm" label-position="right" label-width="120px">
                <el-form-item label="供应商名称">
                    <el-autocomplete  class="autocomplete-row" v-model="dialogForm.supplierName" :fetch-suggestions="querySearchAsync1" placeholder="请输入供应商名称" @select="handleSelect1"></el-autocomplete>
                </el-form-item>
                <el-form-item label="bom名称">
                     <el-autocomplete  class="autocomplete-row" v-model="dialogForm.bomName" :fetch-suggestions="querySearchAsync2" placeholder="请输入bom名称" @select="handleSelect2"></el-autocomplete>
                </el-form-item>
                 <el-form-item label="提前采购期"><el-input v-model="dialogForm.predate" ></el-input></el-form-item>
                <el-form-item label="最小采购数"><el-input v-model="dialogForm.miniPurchase" ></el-input></el-form-item>
                 <el-form-item label="bom数量"><el-input v-model="dialogForm.bomNums" ></el-input></el-form-item>
                <el-form-item label="单价"><el-input v-model="dialogForm.price" ></el-input></el-form-item>
                <el-form-item label="物料提前期"><el-input v-model="dialogForm.materialLeadTime" ></el-input></el-form-item>

                <el-form-item label="起初数"><el-input v-model="dialogForm.firstNums" ></el-input></el-form-item>
            </el-form>
                </div>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="submitList" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import api from '@/axios/api.js'
export default {
    data(){
        return {
            tableHeight: document.documentElement.clientHeight - 170,/**表格高度 */
            tableDialogHeightTabPane:{/**dialog style */
                height: (document.documentElement.clientHeight - 300) + 'px',
                overflowY: 'auto'
            },
            tableData:[],
            allBom:[],/**所有物料列表 */
            allSupplier:[],/**所有供应商列表 */
            loading:false,/**加载参数 */
             keywords:'',/**关键字 */
             sort:{/**排序 */
                sortBy:'',
                desc:null,
            },
            pagination:{/**分页 */
                pageSize:10,
                currentPage:1,
                total:0
            },
            dialog:{/**弹框配置 */
                title:'',
                isShow:false,
            },
            dialogForm:{},

        }
    },
    created () {
        let self = this;
        self.getTableList();
         api.allbomList().then(res=>{
             /**获取所有bom列表 */
             if(res.content.length>0){
                 res.content.forEach(el => {
                     el.value =el.bomName;
                     self.allBom.push({
                         bomName:el.bomName,
                         value:el.bomName,
                         id:el.id
                     })
                 });
             }
        })
        api.allSupplierList().then(res=>{
             /**获取所有供应商列表 */
             if(res.content.length>0){
                 res.content.forEach(el => {
                     el.value =el.name;
                     self.allSupplier.push({
                         name:el.name,
                         value:el.name,
                         id:el.id
                     });
                 });
             }
        })
    },
    methods:{
        getTableList(){
            let self = this;
            self.loading=true;
            let data={
                currentPage:self.pagination.currentPage,
                pageSize:self.pagination.pageSize,
                sortBy:self.sort.sortBy,
                desc:self.sort.desc,
                key:self.keywords
            }
            api.bomandsupplierList(data).then(res=>{
                self.loading=false;
                self.tableData=res.content.items;
                self.pagination.total = res.content.total;
            },error=>{
                 self.loading=false;
            })
        },
        isShowDialog(type,row){
            let self = this;
            self.dialog.title = type==='insert'?'新增':'编辑';
            self.dialog.isShow=true;
            if(type==='insert'){
                self.dialogForm={
                    supplierName:'',
                    sid:'',
                    bomName:'',
                    bid:'',
                    miniPurchase:'',
                    price:'',
                    firstNums:'',
                    predate:'',
                    bomNums:'',
                    materialLeadTime:'',
                }

            }else{
                 self.dialogForm={
                    id:row.id,
                    supplierName:row.supplierName,
                    sid:row.sid,
                    bomName:row.bomName,
                    bid:row.bid,
                    miniPurchase:row.miniPurchase,
                    price:row.price,
                    firstNums:row.firstNums,
                    predate:row.predate,
                    bomNums:row.bomNums,
                    materialLeadTime:row.materialLeadTime
                }
            }
        },
        handleSizeChange(size){
            this.pagination.currentPage=1;
            this.pagination.pageSize=size;
            this.getTableList();
        },
        handleCurrentChange(current){
            this.pagination.currentPage=current;
            this.getTableList();
        },
        searchBtn(){
            this.pagination.currentPage=1;
            this.getTableList();
        },
        sortChange(sort){/**点击排序 */
            if(sort.order===null){
                this.sort.sortBy='';
                this.sort.desc=null;
            }else{
                this.sort.sortBy=sort.prop;
                this.sort.desc = sort.order==='ascending'?false:true;
            }
            this.pagination.currentPage=1;
            this.getTableList();
        },
        querySearchAsync1(queryString, callback){
            let results = queryString ?  this.allSupplier.filter(this.createStateFilter(queryString)) : this.allSupplier;
             console.log(results);
           callback(results);
        },
        querySearchAsync2(queryString, callback){
             let results = queryString ?  this.allBom.filter(this.createStateFilter(queryString)) : this.allBom;
            console.log(results);
           callback(results);
        },
        handleSelect1(item){
            this.dialogForm.supplierName=item.name;
            this.dialogForm.sid=item.id;
        },
        handleSelect2(item){
            this.dialogForm.bomName=item.bomName;
            this.dialogForm.bid=item.id;
        },
        createStateFilter(queryString) {
            return (state) => {
                return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) !==-1);
            };
        },
        submitList(){
           let self = this;
           let type = self.dialog.title==='新增'?'insert':'update';
           api.addUpdateBomSupplier(type,self.dialogForm).then(res=>{
               self.dialog.isShow=false;
               self.getTableList();
               self.$message.success(`${self.dialog.title}成功`)
           },error=>{
               self.$message.error(`${self.dialog.title}失败`)
           })
        },
        deleteData(row){
            let self = this;
            self.$confirm('是否删除?', '提示', {
                confirmButtonClass: 'el-button--warning'
                }).then(() => {
                    api.deleteBomSupplier({id:row.id}).then(res=>{
                        self.$message.success("bom和供应商删除成功！");
                        self.getTableList();
                    },error=>{
                        self.$message.error("bom和供应商删除失败！");
                    })
                }).catch(() => {
            });
        }
    }
}
</script>
<style scoped>
.autocomplete-row{
    width:450px;
}
.input-with-select{
    width:240px;
}
.searchBtn{
    background: #409eff !important;
    color:#fff !important;
}
</style>


